<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="dataDateUnit" label="类别" width="180">
      </el-table-column>
      <el-table-column
        v-for="(month, index) in months"
        :key="index"
        :prop="'salesData.' + index"
        :label="month"
      >
      </el-table-column>
    </el-table>
  </div>
</template>  
  
<script>
// import { ElTable, ElTableColumn } from 'element-ui';

export default {
  name: "SalesTable",
  //   components: {
  //     ElTable,
  //     ElTableColumn
  //   },
  data() {
    return {
      rawData: [
        {
          dataDateUnit: "上衣",
          keywordProperty: {
            "2023年11月": 0,
            "2023年12月": 0,
            "2024年1月": 0,
            "2024年2月": 0,
            "2024年3月": 1179600.51,
            "2024年4月": 102395.01,
          },
        },
        {
          dataDateUnit: "下装",
          keywordProperty: {
            "2023年11月": 0,
            "2023年12月": 0,
            "2024年1月": 0,
            "2024年2月": 0,
            "2024年3月": 2886864.11,
            "2024年4月": 245341.67,
          },
        },
        {
          dataDateUnit: "配件",
          keywordProperty: {
            "2023年11月": 0,
            "2023年12月": 0,
            "2024年1月": 0,
            "2024年2月": 0,
            "2024年3月": 66440.08,
            "2024年4月": 5435.16,
          },
        },
        {
          dataDateUnit: "文胸",
          keywordProperty: {
            "2023年11月": 0,
            "2023年12月": 0,
            "2024年1月": 0,
            "2024年2月": 0,
            "2024年3月": 2265248.88,
            "2024年4月": 1033777.96,
          },
        },
        {
          dataDateUnit: "汇总",
          keywordProperty: {
            "2023年11月": 0,
            "2023年12月": 0,
            "2024年1月": 0,
            "2024年2月": 0,
            "2024年3月": 6398153.58,
            "2024年4月": 1386949.8,
          },
        },
      ],
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
    };
  },
  created() {
    this.processData();
  },
  methods: {
    processData() {
      // 提取所有月份
      this.rawData.forEach((item) => {
        for (const month in item.keywordProperty) {
          if (!this.months.includes(month)) {
            this.months.push(month);
          }
        }
      });

      // 转换数据格式
      this.rawData.forEach((item) => {
        const row = { dataDateUnit: item.dataDateUnit, salesData: [] };
        this.months.forEach((month) => {
          row.salesData.push(item.keywordProperty[month] || 0); // 使用逻辑或操作符确保没有数据的月份显示为0
        });
        this.tableData.push(row);
      });
    },
    formatValue(row, column, cellValue) {
      // 格式化显示值，例如添加千位分隔符
      return cellValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
};
</script>  
  
<style scoped>
/* 添加你的样式 */
</style>